<template>
	<div
		id="top"
		class="header"
		:class="[headerClass]"
		:style="{ position: isFixed ? 'fixed' : '', color: isHomePage ? '#000' : '' }"
	>
		<div class="header_body">
			<div class="header_body_info">
				<strong @click="$router.push('/')">jLongYan's blog</strong>
			</div>
			<div class="header_body_router">
				<router-link
					tag="span"
					:to="item.path"
					class="nav-item"
					:class="active == item.path ? 'is-active' : ''"
					v-for="(item, index) in menuList"
					:key="index"
				>
					<i :class="`icon iconfont ${item.icon}`"></i>
					{{ item.name }}
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "Header",
	props: {
		isFixed: {
			type: Boolean,
			default: true,
		},
	},
	components: {},
	data() {
		return {
			menuList: [
				{ name: "首页", path: "/home", icon: "icon-shouye1" },
				{ name: "文章", path: "/article", icon: "icon-xiangguanwenzhang" },
				{ name: "归档", path: "/archives", icon: "icon-guidang1" },
				{ name: "作品", path: "/project", icon: "icon-zuopin" },
				// { name: "收录", path: "/record", icon:''  },
				// { name: "链接", path: "/link", icon:''  },
				{ name: "关于", path: "/about", icon: "icon-guanyuwomen" },
			],
			isShow: true,
			currentHeight: 0,
			headerClass: "fixed-top",
		};
	},
	methods: {
		handlerScrollNav() {
			let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			let scroll = scrollTop - this.currentHeight;
			this.currentHeight = scrollTop;
			if (scrollTop == 0) {
				this.headerClass = "fixed-top";
			} else if (scroll < 0) {
				this.headerClass = "slideDown";
			} else {
				this.headerClass = "slideUp";
			}
			// if (scroll < 0) {
			// 	this.isShow = true;
			// } else {
			// 	this.isShow = false;
			// }
		},
	},
	computed: {
		active: function () {
			return this.$route.path;
		},
		isHomePage: function () {
			const {path} = this.$route
			return ["/home","/article","/archives","/project","/about"].includes(path) ;
		},
	},
	mounted() {
		window.addEventListener("scroll", this.handlerScrollNav);
	},
};
</script>
<style lang="scss" scoped>
.header {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	height: 60px;
	width: 100%;
	padding: 0 3%;
	z-index: 1024;
	transition: all 1.5s;
	&_body {
		width: 100%;
		display: flex;
		justify-content: space-between;
		&_info {
			display: inline-block;
			font-size: 1.25rem;
			line-height: inherit;
			white-space: nowrap;
			cursor: pointer;
		}
		&_router {
			display: flex;
			.nav-item {
				height: calc(100% - 2px);
				text-align: center;
				padding-bottom: 8px;
				font-weight: 600;
				margin-left: 1.5rem;
				position: relative;
				transition: all 0.5s;
				// color: #fff;
				&:hover {
					cursor: pointer;
					color: #1e80ff;
					&::before {
						width: 100%;
						height: 1px;
						transition: all 1s ease-in;
					}
				}
				&::before {
					content: "";
					width: 0%;
					height: 1px;
					position: absolute;
					bottom: 0px;
					left: 0;
					margin: 0 auto;
					background: #fff;
				}
			}
			.router-link-active {
				color: #1e80ff;
				transition: all 0.3s;
				&:hover {
					cursor: pointer;
					&::before {
						width: 100%;
						height: 0px;
						transition: all 0.3s;
					}
				}
			}
		}
	}
}
// .slideDown {
// 	transform: translateY(0);
// 	transition: transform 0.7s ease-out;
// }
// .slideUp {
// 	transition: transform 0.7s ease-out;
// 	transform: translateY(-100px);
// }
.fixed-top {
	background: transparent;
	color: #4c4948;
	color: #fff;
}
.slideDown {
	background: rgba(255, 255, 255, 0.8);
	color: #4c4948;
}
.slideUp {
	color: #4c4948;
	// color: #fff;
	transform: translateY(-100px);
}
</style>
